<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_坐标系的使用</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>

</head>
<body>
<div id="main" style="width:800px;height:500px"></div>
</body>
<script>
  let dom = document.querySelector('#main');
  const myechart = echarts.init(dom);
  options = {
    title: {
      text: '坐标点练习',
      subtext: '多个坐标系',
      left: 'left',
    },
    xAxis: [
      {
      data: ['衣服', '直播', '经济', '娱乐']
      },
      ],
    yAxis: [{
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true
      }
    }, {
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true
      }
    }],
    series: [
      {
        type: 'scatter',
        name: '散点图',
        data: [10, 23, 31, 8, 11],
        yAxisIndex: 0,
        // xAxisIndex:1
      },
      {
        type: 'bar',
        name: '条形图',
        data: [22, 41, 65, 34, 23],
        yAxisIndex: 1,
        // xAxisIndex:0
      }
    ],
    tooltip: {},
    toolbox: {
    show: true,
      feature: {
      //各个功能（5个）在页面展示的顺序可调，移动代码段进行调整
      dataZoom: {
        yAxisIndex: "none"
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ["line", "bar"]
      },
      restore: {},
      saveAsImage: {}
    }
  },
    legend: {
      data: ['散点图', '条形图'],
    },
  }
  myechart.setOption(options)
</script>
</html>
